<template>
  <el-dialog title="添加域名">
    <div>
      <el-input
        v-model="dn"
        placeholder="请输入域名，例如：www.example.com"
      ></el-input>
    </div>
    <div class="dialog-toolar">
      <el-button @click="handleClickOK" type="success">确定</el-button>
      <el-button @click="handleClickCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "domains-dialog-insert",

  data() {
    return {
      dn: "",
    };
  },

  methods: {
    handleClickCancel() {
      this.close();
    },

    handleClickOK() {
      let name = this.dn;
      let vo = {
        domains: [{ name }],
      };
      let config = {
        method: "POST",
        url: "/api/v1/domains",
        data: vo,
      };
      let p = this.$store.dispatch("axios/send", config);
      p.then(() => {
        this.close();
        this.refreshList();
      });
    },

    refreshList() {
      this.$store.dispatch("domains/fetch");
    },

    close() {
      this.$emit("update:modelValue", false);
    },
  },
};
</script>

<style scoped>
.dialog-toolar {
  margin-top: 20px;
}
</style>
